<#include "/common/_header.html" />
<style>
    #photo{ width:auto; height:auto; margin:auto; margin-top:0.5rem; background:#BFF7F7;}
    #photo img{width:77px; height:77px;margin-right:5px;}
    #chooseImg{position: absolute;z-index: 1;top: 0; left: 0;width:77px;height:77px;opacity: 0;}
    .file_box {width:77px; height:77px;margin-right:5px;display:-webkit-inline-box;position:relative;
			   background-image:url('${path}/resource/images/img_add.png');
			  }
</style>
<div class="page-group"><!-- 页面组 -->
	<div class="page page-current"><!-- 页面组中的每一个页面，可以互相跳转 -->
		<header class="bar bar-nav"><!-- 每个页面的头部 -->
			<button class="button button-link button-nav pull-left" id="_backword">
				<span class="icon icon-left"></span> 返回
			</button>
			<button class="button button-fill button-success pull-right" id="_saveBbs">
				保存 <span class="iconfont icon-check"></span>
			</button>
			<h1 class="title" style="font-size: 1rem;">新的优惠</h1>
		</header>
		<#include "/common/_navbar.html" /><!-- 每个页面的底部 -->
		<div class="content native-scroll"><!-- 每个页面的内容区域 -->
			<form id="bbsform" action="${path}/discounts/addEntity" method="post">
			  <input type="hidden" name="tags">
			  <input type="hidden" name="tagsname">
			  <div class="list-block">
			    <ul>
			      <li>
			        <div class="item-content">
			          <div class="item-inner" style="margin-left:-0.25rem;">
			            <div class="item-input">
			              <textarea name="comments" placeholder="简单描述优惠信息..."></textarea>
			            </div>
			          </div>
			        </div>
			      </li>
			    </ul>
			  </div><!-- end of list-block -->
			  <div class="content-block" style="margin:-0.5rem 0 -0.5rem -0.3rem;">
		        <div id="photo">
		        	<div class="file_box">
		        		<input type="file" id="chooseImg" accept="image/*" onchange="chooseImgs(this)" multiple/>
		        	</div>
		        </div>
			  </div>
			  <div class="content-block tags">
			  	   <#assign cutflag=0>
			  	   <#list tags as vo>
			  	   	 <#assign cutflag=cutflag+1>
			  	   	 <#if vo_index%4 = 0>
			  	   	 	<p class="buttons-row">
			  	   	 </#if>
					 <a href="#" class="button button-round" tagid="${vo.id}">${vo.tagname}</a>
					 <#if ((cutflag-4)>0 && (cutflag-4)%4 = 0) || !vo_has_next>
					 	</p>
					 </#if>
			  	   </#list>
			  </div>
			</form>														
		</div><!-- end of content -->
	</div><!-- end of page -->
</div><!-- end of page group -->
<#include "/common/_footer.html" />
<script src="${path}/resource/js/exif.js"></script>
<script>
$(function(){
	$("#_backword").click(function(){
		location.href = "${path}/discounts";
	});
	$(".button-round").click(function(){
		if($(this).hasClass("active")){
			$(this).removeClass("active");
		}else{
			$(this).addClass("active");
		}
		var choiceStr = "";
		var tagsname = "";
		var count = 0;
		$(".button-round", $(".tags")).each(function(){
			if($(this).hasClass("active")){
				choiceStr += $(this).attr("tagid")+", ";
				tagsname += $(this).text()+", ";
				count++;
			}
		});
		if(count>2){
			$.toast("标签最多选2个");
			$(this).removeClass("active");
			return false;
		}
		if(choiceStr != ""){
			choiceStr = choiceStr.substring(0,choiceStr.length-2);
			tagsname = tagsname.substring(0,tagsname.length-2);
		}
		$("input[name='tags']").val(choiceStr);
		$("input[name='tagsname']").val(tagsname);
	});
	$("#_saveBbs").click(function(){
		if($("textarea[name='comments']").val().trim()==''){
			$.toast("请填写内容");
			return;
		}else if($("#photo").children().length==0){
			$.toast("请添加照片");
			return;			
		}else if($("input[name='tags']").val()==''){
			$.toast("请选择标签");
			return;
		}
		$.showIndicator();
		$("#bbsform").submit();
	});
});
function chooseImgs(obj){
	if($("#photo img").length==2){//每张图片占两个元素
		$.alert("最多可以上传2张照片。");
		return ;
	}
	if(obj.files!=null && obj.files.length>0){
		$.showIndicator();
		readImg(obj.files,obj.files.length,0);
	}
}
function readImg(allfile,remainFile,fileindex){
	var maxSize = 100 * 1024;//100KB，大于100KB将进行压缩
	var file = allfile[fileindex];
	remainFile--;
	fileindex++;
    var orientation;
	EXIF.getData(file,function(){
		orientation=EXIF.getTag(this,'Orientation');
		var reader = new FileReader();
	    reader.onload = function(){
	    	var result = this.result;   //result为data url的形式
	    	getImgData(this.result,orientation,function(data){
	    		//这里可以使用校正后的图片data了
	            img = new Image();
	            img.src = data;
	            if(data.length < maxSize){
	                previewImg(data);
	                if(remainFile>0){
	                	readImg(allfile,remainFile,fileindex);
	                }
	            } else {
	            	var comdata = compressImg(img);
	                previewImg(comdata);
	                if(remainFile>0){
	                	readImg(allfile,remainFile,fileindex);
	                }
	            }
			});
	    }
	    reader.readAsDataURL(file);
	});
}
function previewImg(imgData){
    //追加到图片列表
	var imgNode = document.createElement("img");
    var id = "img_"+new Date().getTime();
	imgNode.src=imgData;
	imgNode.id=id;
	imgNode.onclick = function(){
		picdet(imgData,id);
	};
	var hiddenNode = document.createElement("input");
	hiddenNode.type="hidden";
	hiddenNode.name="base64Img";
	hiddenNode.value=imgData;
	$(hiddenNode).insertBefore($(".file_box"));
	$(imgNode).insertBefore($(".file_box"));
	$.hideIndicator();
}
function picdet(imgsrc,imgid){
	var popupHTML = '<div class="popup" style="justify-content:center;align-items:center;background-color:#000000;">'+
      	"<a onclick='detPic(\""+imgid+"\")' style='position:absolute;float:right;z-index:100;right:1rem;top:0;'>X</a>"+
		'<div class="close-popup">'+
			'<img src="'+imgsrc+'" style="max-width:100%;height:auto;">'+
		'</div>'
    '</div>'
	$.popup(popupHTML);
    $(".popup").css("display","flex");
}
function detPic(imgid){
	$.closeModal();
	$("#"+imgid).next("input").remove();
	$("#"+imgid).remove();
}
//处理iphone拍照图片旋转问题
function getImgData(img,dir,next){
	var image=new Image();
	image.src=img;
	image.onload=function(){
		var degree=0,drawWidth,drawHeight,width,height;
		drawWidth=this.naturalWidth;
		drawHeight=this.naturalHeight;
		//以下改变一下图片大小
		var maxSide = Math.max(drawWidth, drawHeight);
		if (maxSide > 1024) {
			var minSide = Math.min(drawWidth, drawHeight);
			minSide = minSide / maxSide * 1024;
			maxSide = 1024;
			if (drawWidth > drawHeight) {
				drawWidth = maxSide;
				drawHeight = minSide;
			} else {
				drawWidth = minSide;
				drawHeight = maxSide;
			}
		}
		var canvas=document.createElement('canvas');
		canvas.width=width=drawWidth;
		canvas.height=height=drawHeight;
		var context=canvas.getContext('2d');
		//判断图片方向，重置canvas大小，确定旋转角度，iphone默认的是home键在右方的横屏拍摄方式
		switch(dir){
			//iphone横屏拍摄，此时home键在左侧
			case 3:
			degree=180;
			drawWidth=-width;
			drawHeight=-height;
			break;
			//iphone竖屏拍摄，此时home键在下方(正常拿手机的方向)
			case 6:
			canvas.width=height;
			canvas.height=width;
			degree=90;
			drawWidth=width;
			drawHeight=-height;
			break;
			//iphone竖屏拍摄，此时home键在上方
			case 8:
			canvas.width=height;
			canvas.height=width;
			degree=270;
			drawWidth=-width;
			drawHeight=height;
			break;
		}
		//使用canvas旋转校正
		context.rotate(degree*Math.PI/180);
		context.drawImage(this,0,0,drawWidth,drawHeight);
		//返回校正图片
		next(canvas.toDataURL("image/jpeg",0.3));
	}
}
</script>